<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>PC聊天</title>
    <link rel="stylesheet" href="css/session-eg.css">
    <script type="text/javascript" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
	<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
    
</head>

<body>


<div class="main">
    <div class="top">
        <div class="top-left">
            <div class="header"></div>
            <div class="search">
                <input type="text">
                <i class="icon-sear"></i>
            </div>
        </div>
        <div class="top-type">
            <a href="#" class="news icon-site"></a>
            <a href="#" class="friend icon-site"></a>
            <a href="#" class="file icon-site"></a>
        </div>
        <div class="top-right">
            <i class="ic-menu ic-same"></i>
            <i class="ic-shrink ic-same"></i>
            <i class="ic-boost ic-same"></i>
            <a href="community.html" ><i class="ic-close ic-same"></i></a>
        </div>
    </div>
    <div class="box">
        <div class="chat-list">
            <div v-for="c in contact" v-if="c.uid!=loginUid" class="list-box"><a @click="query(c.uid)" :href="'session.html?recvUid='+c.uid">
                <img class="chat-head" :src="c.ujpg" alt="图片加载失败">
                <div class="chat-rig">
                    <p class="title">{{c.uname}}</p>
                    <p class="text"></p>
                </div>
            </div></a>
            
           
        </div>
        <div class="box-right">
            <div class="recvfrom">
                <div class="nav-top">
                    <p>{{recvUser.uname}}</p>
                </div>
                <div class="news-top">
                    <ul>
                    	 <li v-for="h in history" :class="h.sendUid==loginedUser.uid? 'self' : 'other'">
                            <div class="avatar"><img :src="h.sendUid==loginedUser.uid? loginedUser.ujpg : recvUser.ujpg" alt=""></div>
                            <div class="msg">
                                <p class="msg-name">{{h.sendUid==loginedUser.uid? loginedUser.uname : recvUser.uname}}</p>
                                <p class="msg-text" style="background-color: #ccc">{{h.content}} <emoji class="pizza" ></emoji></p>
                                <!-- 日期要格式化 -->
                                <time>{{h.sendTime}}</time>
                            </div>
                        </li>
                       <!--  <li v-for="m in messages" :class="m.sendUid==loginedUser.uid? 'self' : 'other'">
                            <div class="avatar"><img :src="m.sendUid==loginedUser.uid? loginedUser.ujpg : recvUser.ujpg" alt=""></div>
                            <div class="msg">
                                <p class="msg-name">{{m.sendUid==loginedUser.uid? loginedUser.uname : recvUser.uname}}</p>
                                <p class="msg-text" style="background-color: #ccc">{{m.content}} <emoji class="pizza"></emoji></p>
                                日期要格式化
                                <time>{{m.sendTime}}</time>
                            </div>
                        </li> -->
                    </ul>
                </div>
            </div>
            <div class="sendto">
                <div class="but-nav">
                    <ul>
                        <li class="font"></li>
                        <li class="face"></li>
                        <li class="cut"></li>
                        <li class="page"></li>
                        <li class="old"></li>
                    </ul>
                </div>
                <div class="but-text">
                    <textarea v-model="content" name="" id="" cols="110" rows="6"></textarea>
                    <a href="#" class="button" @click="send">发送</a>
                </div>
            </div>
        </div>
 
    </div>
 
 
</div>
 <script type="text/javascript">
  var v = new Vue({
	  el : ".main",
	  data : {
		  recvUid : location.search.replace(/\?recvUid=(\d+)/,"$1"),  // 接受者id , 从url地址中获取
		  recvUser : {}, // 根据 recvUid 查询到 用户对象
		  content : "",
		  loginedUser : {},
		  messages : [],  // 后续实现, 在页面打开是, 从数据库读取, 渲染页面
		  history:[],
		  loginUid:"",
		  contact:[],
	  },
	  created(){
		  var params = new URLSearchParams();
		  //获取收件人的头像用户名
		  params.append("receiveUid",this.recvUid);
		  axios.post("msg/selectOthers.s",params).then(res=>{
			  this.recvUser = res.data[0];
		  })
		 
		  // 获取登录的用户信息
		  axios.get("getloginUser.s").then(res=>{
			  this.loginedUser = res.data;
			  this.loginUid = res.data.uid;
			  //获取历史记录
			  params.append("othersend",this.recvUid);
			  params.append("otherrecv",this.recvUid);
			  params.append("selfsend",this.loginUid);
			  params.append("selfrecv",this.loginUid);
			  // 启动定时任务
			  window.setInterval( ()=>{
				  axios.post("msg/searchHistory.s",params).then(res=>{
					  this.history = res.data;
					  
				  });
				  // this.query();
			  }, 1000 );
			  params.append("loginUid",this.loginUid);
			  axios.post("msg/selectList.s",params).then(res=>{
					this.contact = res.data;	  
					console.info(res.data);
			  });
		  });
		  
		 
	  },
	  methods : {
		  send(){
			  let p = new URLSearchParams();
			  p.append("sendUid",this.loginedUser.uid);
			  p.append("recvUid",this.recvUid);
			  p.append("content",this.content);
			  axios.post("msg/send.s", p).then(res=>{
				  if(res.data.code==0){
					  alert(res.data.msg);
				  } else {
					  // 将内容追加到 ...
					 // this.messages.push(res.data.data)
					 this.content="";
				  }
			  });
		  },
		 query(recvUid){
			  var params =new URLSearchParams();
			  params.append("loginUid",this.loginUid);
			  params.append("recvUid",recvUid)
			  axios.post("msg/changeRead.s",params).then(res=>{
				  console.info("-----");
			  })
		  },
		 
	  }
  })
 
 </script>
</body>
</html>